<template>
  <view class="container d-flex flex-column">
    <view class="flex-fill form">
      <list-cell :hover="false">
        <view class="form-input w-100 d-flex align-items-center">
          <view class="label">昵称</view>
          <view class="input flex-fill">
            <input type="text" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base" 
            v-model="member.userName">
          </view>
        </view>
      </list-cell>
      <list-cell :hover="false">
        <view class="form-input w-100 d-flex align-items-center">
          <view class="label">手机号码</view>
          <view class="input flex-fill">
            <input type="text" v-model="member.userPhone" disabled>
          </view>
        </view>
      </list-cell>
      <list-cell :hover="false">
        <view class="form-input w-100 d-flex align-items-center">
          <view class="label">性别</view>
          <view class="input flex-fill">
            <view class="radio-group">
              <view class="radio" :class="{'checked': member.userSex == '1'}" style="margin-right: 10rpx;" @tap="member.userSex=1">先生</view>
              <view class="radio" :class="{'checked': member.userSex == '2'}" @tap="member.userSex=2">女士</view>
            </view>
          </view>
        </view>
      </list-cell>
      <list-cell :hover="false" :arrow="!member.userBrithday">
        <view class="form-input w-100 d-flex align-items-center">
          <view class="label">生日</view>
          <view class="input flex-fill">
            <picker mode="date" :value="date" :start="startDate" :end="endDate" v-if="!member.userBrithday" @change="handleDateChange">
              生日当天有惊喜
            </picker>
            <input type="text" v-else :value="member.userBrithday" disabled>
          </view>
        </view>
      </list-cell>
      <list-cell :hover="false" last>
        <view class="form-input w-100 d-flex align-items-center">
          <view class="label">入会时间</view>
          <view class="input flex-fill">
            <input type="text" v-model="member.userTime" disabled>
          </view>
        </view>
      </list-cell>
    </view>
    <view class="btn-box d-flex align-items-center just-content-center">
      <button type="primary" class="save-btn" @tap="save">保存</button>
    </view>
  </view>
</template>

<script>
  import listCell from '@/components/list-cell/list-cell'
  import User from '../../main.js'
  export default {
    components: {
      listCell
    },
    data() {
      const currentDate = this.getDate({format: true})
      return {
        member: {},
        date: currentDate,
        userId:User.userId,
      }
    },
    computed: {
       startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    onLoad() {
      uni.request({
        url:"http://127.0.0.1:8089/Login/selId/"+ this.userId ,
        method:"GET",
        success: (res) => {
          this.member = res.data.data
        }
      })
      //this.member = this.$store.state.member
    },
    methods: {
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
  
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      handleDateChange(e) {
        this.member.birthday = e.target.value
      },
      // 保存
      save(){    
      uni.request({
        url:"http://127.0.0.1:8089/Login/upd",
        method:"POST",
        data:this.member,
        success: (res) => {
          console.log(res)
        }
      })                 				
        /*const member = Object.assign(this.$store.state.member, this.member)
        this.$store.commit('SET_MEMBER', member)*/
        // 返回上一页
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.container {
  padding: 20rpx 30rpx;
}

.form {
  border-radius: 8rpx;
}

.form-input {
  .label {
    width: 160rpx;
    font-size: $font-size-base;
    color: $text-color-base;
  }
  
  .input {
  }
  
  .radio-group {
    display: flex;
    justify-content: flex-start;
    
    .radio {
      padding: 10rpx 30rpx;
      border-radius: 6rpx;
      border: 2rpx solid $text-color-assist;
      color: $text-color-assist;
      font-size: $font-size-base;
      
      &.checked {
        background-color: $color-primary;
        color: $text-color-white;
        border: 2rpx solid $color-primary;
      }
    }
  }
}

.btn-box {
  height: calc((100vh - 40rpx) / 2);
}

.save-btn {
  width: 90%;
  border-radius: 50rem !important;
  font-size: $font-size-lg;
}
</style>